import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() => runApp(const FlexDemo());

class FlexDemo extends StatelessWidget {
  const FlexDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flex Demo'),
        ),
        body: Column(
          children: [
            Flex(
              direction: Axis.horizontal,
              children: [
                Expanded(
                    flex: 1,
                    child: Container(
                      height: 30,
                      color: Colors.red,
                    ),
                ),
                Expanded(
                  flex: 2,
                    child: Container(
                      height: 30,
                      color: Colors.blue,
                    )
                )
              ],
            ),
            Padding(
                padding: const EdgeInsets.only(top: 20.0),
              child: SizedBox(
                height: 100,
                child: Flex(
                  direction: Axis.vertical,
                  children: [
                    Expanded(
                        flex: 2,
                        child: Container(
                          height: 20,
                          color: Colors.red,
                        )
                    ),
                    Spacer(
                      flex: 1,
                    ),
                    Expanded(
                        flex: 1,
                        child: Container(
                          height: 20,
                          color: Colors.yellow,
                        )
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}